<style lang="less">
    @import '../../styles/common.less';
    @import '../tables/components/table.less';
</style>
<template>
    <div>
        <form action="" style="margin: 5px 0">
            <Input v-model="name"  placeholder="管理员名称" @on-click="" style="width: 200px;margin-right: 3px;"></Input>
            <div style="float: right">
            <Button type="info" style="float: right;margin-right: 5px" @click="addUser">添加</Button>
            <Button type="success" style="float: right;margin-right: 5px" @click="search">查询</Button>
            </div>
        </form>
        <Table :loading="loading" refs="table1" @on-selection-change="changeNum" @on-delete="handleDel" :data="Message" :columns="columnsList"></Table>
        <Modal
                v-model="modal1"
                title="创建新用户"
        >
            <Form ref="Validate" :model="addInner" :rules="addValidate"  :label-width="100">
                <Row :gutter="16">
                    <Col span="12">
                    <FormItem label="管理员名称" prop="sysEnglishName">
                        <Input v-model="addInner.sysEnglishName" placeholder="请输入管理员名称"  style="margin-right: 3px;"></Input>
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="手机号" prop="sysUserPhone">
                        <Input v-model="addInner.sysUserPhone"  placeholder="请输入手机号" style="margin-right: 3px;"></Input>
                    </FormItem>
                    </Col>
                </Row>
                <Row :gutter="16" style="margin-top: 20px;">
                    <Col span="12">
                    <FormItem label="管理员类型" prop="sysUserAuthorityType">
                        <Select v-model="addInner.sysUserAuthorityType"  style="margin-right: 3px;">
                            <Option value="0">超级管理员</Option>
                            <Option value="1">普通管理员</Option>
                            <Option value="2">身份认证管理员</Option>
                            <Option value="3">操盘手</Option>
                            <Option value="4">提现审核管理员</Option>

                        </Select>
                    </FormItem>
                    </Col>
                </Row>
            </Form>
            <div slot="footer">
                <Button type="primary" @click="add('Validate')">保存</Button>
            </div>
        </Modal>
        <Modal
                v-model="modal2"
                title="修改"
        >
            <Form ref="formValidate" :model="changeInner"  :rules="ruleValidate" :label-width="100">
                <Row :gutter="16">
                    <Col span="12">
                    <FormItem label="修改手机号" prop="changesysUserPhone">
                        <Input v-model="changeInner.changesysUserPhone"   style="margin-right: 3px;"></Input>
                    </FormItem>
                    </Col>
                    <Col span="12">
                    <FormItem label="状态" prop="zt">
                        <Select v-model="changeInner.zt"  style="margin-right: 3px;">
                            <Option value="0">有效</Option>
                            <Option value="1">无效</Option>
                        </Select>
                    </FormItem>
                    </Col>
                </Row>
                <Row :gutter="16" style="margin-top: 20px;">
                    <Col span="12">
                    <FormItem label="管理员类型" prop="changesysUserType">
                        <Select v-model="changeInner.changesysUserType"  style="margin-right: 3px;">
                            <Option value="0">超级管理员</Option>
                            <Option value="1">普通管理员</Option>
                            <Option value="2">身份认证管理员</Option>
                            <Option value="3">操盘手</Option>
                            <Option value="4">提现审核管理员</Option>
                        </Select>
                    </FormItem>
                    </Col>
                </Row>
            </Form>
            <div slot="footer">
                <Button type="primary" @click="sub('formValidate')">保存</Button>
            </div>
        </Modal>

        <Page :total="pageNum" :page-size="pageSize"  style="text-align: center;margin-top: 15px;" show-total @on-page-size-change='pageSizes'  show-elevator show-sizer @on-change="pageChange"></Page>
    </div>
</template>
<script>
    import $http from '../../utils/axiosWrap'
    import canEditTable from '../tables/components/canEditTable.vue'
    import Cookies from 'js-cookie'
    export default {
        data() {
            var validatePass = (rule,value, callback) => {
                setTimeout(() => {
                    var reg = /^[A-Za-z]{5,20}$/;
                    if(!reg.test(value)){
                        callback(new Error('管理员名为5-20位字母'));
                    }else{
                        callback();
                    }

                }, 1000);
            };
            var validatePhone = (rule,value, callback) => {
                setTimeout(() => {
                    var reg = /^[1][0-9]{10}$/;
                    if(!reg.test(value)){
                        callback(new Error('手机号格式错误'));
                    }else{
                        callback();
                    }

                }, 1000);
            };
            return {
                loading: true,
                Message:[],
                admin:true,
                modal1:false,
                modal2:false,
                addInner:{
                    sysEnglishName:'',
                    sysUserPhone:'',
                    sysUserAuthorityType:''
                },
                changeInner:{
                    changesysEnglishName:'',
                    changesysUserPhone:'',
                    changesysUserAuthorityType:'',
                    changeloginUser:'',
                    changesysUserType:'',
                    zt:''
                },
                userListInner:{},
                changeInner:{
                    password:''
                },
                columnsList: [
                    {
                        title: '序号',
                        width: 80,
                        align: 'center',
                        render: (h, params) => {
                            return  params.index + (this.initPage- 1) * this.pageSize + 1
                        }
                    },
                    {
                        title: '用户名',
                        align: 'center',
                        key: 'sysEnglishName',
                        editable: true
                    },
                    {
                        title: '类型',
                        align: 'center',
                        key:'sysUserAuthorityType',
                        render: (h, params) => {
                            if(params.row.sysUserAuthorityType == '0'){
                                return '超级管理员'
                            }else if(params.row.sysUserAuthorityType == '1'){
                                return '普通管理员'
                            }else if(params.row.sysUserAuthorityType == '2'){
                                return '身份认证管理员'
                            }else{
                                return '操盘手'
                            }
                        }
                    },
                    {
                        title: '状态',
                        align: 'center',
                        key:'sysUserDelFlag',
                        render: (h, params) => {
                            if(params.row.sysUserDelFlag == '0'){
                                return '有效'
                            }else{
                                return '无效'
                            }
                        }
                    },
                    {
                        title: '创建时间',
                        align: 'center',
                        width:'auto',
                        editable: true,
//                        key:'createTime'
                        render: (h, params) => {
                            return params.row.createTime.replace(/\T/g, ' ').substring(0,19)
                        }
                    },
                    {
                        title: '操作',
                        align: 'center',
                        width: 140,
                        render: (h, params) => {
                            if(this.admin){
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            marginRight: '5px'
                                        },
                                        on: {
                                            click: () => {
                                                this.change(params)
                                            }
                                        }
                                    }, '编辑')
                                ]);
                            }
                        }
                    }
                ],
                name: '',
                phone: '',
                addValidate: {
                    sysEnglishName: [
                        { required: true, message: '管理员名不得为空', trigger: 'blur' },
                        {validator: validatePass, trigger: 'blur' }
                    ],
                    sysUserPhone: [
                        { required: true, message: '管理员手机号不得为空', trigger: 'blur' },
                        {validator: validatePhone, trigger: 'blur' }
                    ],
                    sysUserAuthorityType: [
                        { required: true, message: '类型不得为空', trigger: 'blur' }
                    ]
                },
                ruleValidate: {
                    changesysUserPhone: [
                        { required: true, message: '手机号不得为空', trigger: 'blur' }
                    ],
                    zt: [
                        { required: true, message: '状态不得为空', trigger: 'blur' }
                    ],
                    changesysUserType:[
                        { required: true, message: '类型不得为空', trigger: 'blur' }
                    ]
                },
                pageNum:0,
                pageSize:10,
                initPage:1
            }
        },
        created: function () {
            this.load()

        },
        methods: {
            handleDel (val, index) {
                this.$Message.success('删除了第' + (index + 1) + '行数据');
            },
            search (){
                let _this = this
                let params = new URLSearchParams()
                _this.loading = true
//                填写用户名搜索
                if(_this.name){
                    params.append('sysEnglishName',_this.name )
                    $http.post('/sysManagerUser/getManagerUserOnly',params).then(function (res) {
                        console.log(res)
                        if(res.suc){
                            _this.Message = []
                            _this.Message[0] = res.result
                            console.log(_this.Message)
                        }
                        _this.loading = false
                    })
                }else{
                    _this.load()
                }
            },
            pageSizes(val){
                this.pageSize = val
                this.load()
            },
            load (){
                let _this = this
                let params = new URLSearchParams()
                params.append('pno',_this.initPage)
                params.append('pageSize',_this.pageSize)
                $http.post('/sysManagerUser/getManagerUserPage',params).then(function (res) {
                    _this.Message = res.result.list
                    console.log(res)
                    _this.pageNum = res.result.totalRow
                    _this.loading = false
                    if(!res.suc){
                        if(res.msg == "请先登录"){
                            _this.$Message.error('请重新登录！');
                        }else{
                            _this.$Message.error(res.msg);
                        }
                    }

                })
            },
            changeNum (val){
                console.log(val)
            },
            info(val){
                this.modal1 = true
                this.userListInner = val.row
            },
            change(val){
                this.changeInner.changesysEnglishName= val.row.sysEnglishName
                this.changeInner.changesysUserPhone= val.row.sysUserPhone
                this.changeInner.changesysUserType= val.row.sysUserAuthorityType
                this.changeInner.changeloginUser= val.row.createUser
                this.changeInner.zt= val.row.sysUserDelFlag
                this.modal2 = true
            },
            sub(name){
                let _this = this
                _this.$refs[name].validate((valid) => {
                    if (valid) {
                        let params = new URLSearchParams()
                        console.log(_this.changeInner.changesysEnglishName)
                        params.append('sysEnglishName',_this.changeInner.changesysEnglishName)
                        params.append('sysUserPhone',_this.changeInner.changesysUserPhone)
                        params.append('sysUserAuthorityType',_this.changeInner.changesysUserType)
                        params.append('sysUserDelFlag',_this.changeInner.zt)
                        params.append('loginUser',Cookies.get('user'))
                        params.append('type','update')
                        console.log(params)
                        $http.post('/sysManagerUser/saveSysManagerUser',params).then(function (res) {
                             if (res.suc) {
                                 _this.$Message.info('信息修改成功!')
                                 _this.modal2 = false
                                _this.load()
                             }else{
                                 _this.$Message.error('信息修改失败!')
                             }
                        }).then(function (res) {
                            console.log(res)
                        })
                    } else {
                        _this.$Message.error('信息修改失败!')
                    }
                })

            },
            add(name){
                let _this = this
                _this.$refs[name].validate((valid) => {
                    if (valid) {
                        let params = new URLSearchParams()
                        params.append('sysEnglishName',_this.addInner.sysEnglishName)
                        params.append('sysUserPhone',_this.addInner.sysUserPhone)
                        params.append('sysUserAuthorityType',_this.addInner.sysUserAuthorityType)
                        params.append('sysUserDelFlag','0')
                        params.append('loginUser',Cookies.get('user'))
                        params.append('type','add')
                        $http.post('/sysManagerUser/saveSysManagerUser',params).then(function (res) {
                            if(res.suc){
                                _this.modal1 = false
                                _this.load()
                                _this.$Message.info('管理员添加成功!')
                            }else{
                                _this.$Message.error('管理员添加失败!')
                            }
                        })
                    } else {
                        _this.$Message.error('信息填写有误!')
                    }
                })

            },
            addUser(){
                this.addInner.sysEnglishName=''
                this.addInner.sysUserPhone=''
                this.addInner.sysUserAuthorityType=''
                this.modal1 = true
            },
            cancel(){
//                this.$Message.info('Clicked cancel');
            },
            pageChange(index){
                this.initPage = index
                this.loading = true
                this.load ()
            }
        }
    }
</script>
<style>
    .userListInfo{
        display: inline-block;
        width: 120px;
    }
    .userListInfoWrap p{
        line-height: 26px;
    }
</style>

